<template>
  <a-modal title="填写箱号、封号" width="640px" :visible="visible" @ok="handleOk" @cancel="handleCancel">
    <p>
      <img src="../../../static/images/tshi.png" style="float:left; margin-right:5px;" />一行填写一个箱子的箱号、封号，填写后在拆分的订单中，自动使用该填写的箱号、封号
    </p>
    <a-table
      :columns="columns"
      :data-source="dataInit"
      :pagination="false"
      :maskClosable="false"
      size="middle"
      rowKey="sort"
    >
      <template
        v-for="col in ['containerNo', 'containerSealNo', 'holderName']"
        :slot="col"
        slot-scope="text, record"
      >
        <div :key="col">
          <a-input
            :value="text"
            @change="e => handleChange(e.target.value, record.sort, col)"
            :max-length="col==='holderName'?10:15"
          />
        </div>
      </template>
    </a-table>
  </a-modal>
</template>

<script>

const createArray = (size) => {
  const arr = []
  for (let i = 0; i < size; i++) {
    arr.push({})
  }
  return [...arr]
}

export default {
  name: 'box-title-no',
  props: {
    visible: Boolean,
    data: {
      type: Array,
      default () {
        return []
      }
    },
    size: Number
  },
  data () {
    const columns = [
      {
        title: '序号',
        width: '60px',
        dataIndex: 'sort'
      },
      {
        title: '箱号',
        dataIndex: 'containerNo',
        scopedSlots: { customRender: 'containerNo' }
      },
      {
        title: '封号',
        dataIndex: 'containerSealNo',
        scopedSlots: { customRender: 'containerSealNo' }
      },
      {
        title: '持箱人',
        dataIndex: 'holderName',
        scopedSlots: { customRender: 'holderName' }
      }
    ]

    return {
      columns,
      dataInit: []
    }
  },
  methods: {
    handleChange (value, sort, column) {
      const newData = [...this.dataInit]
      const target = newData.filter(item => sort === item.sort)[0]
      if (target) {
        if (column === 'containerNo') {
          target[column] = value.toUpperCase()
        } else {
          target[column] = value
        }
        this.dataInit = newData
      }
    },
    handleOk () {
      const nameList = []
      const nameList2 = []
      this.dataInit.forEach(v => {
        if (v.containerNo) nameList.push(v.containerNo)
        if (v.containerSealNo) nameList2.push(v.containerSealNo)
      })
      // eslint-disable-next-line no-irregular-whitespace
      if (new Set(nameList).size !== nameList.length || new Set(nameList2).size !== nameList2.length) {
        this.$message.error('箱号和封号不能有重复的')
        return false
      }
      this.$emit('setVisible', this.dataInit)
    },
    handleCancel () {
      this.$emit('setVisible', false)
    }
  },
  watch: {
    visible () {
      if (this.visible) {
        if (this.size >= 0) {
          let newData = [...this.data]
          let len = newData.length
          if (this.size > len) {
            newData = newData.concat(createArray(this.size - len))
          } else {
            newData = newData.filter((v, i) => i < this.size)
          }
          // console.log(newData)
          this.dataInit = newData.map((v, i) => {
            return {
              sort: i + 1,
              holderName: v.holderName || '',
              containerNo: v.containerNo || '',
              containerSealNo: v.containerSealNo || ''
            }
          })
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
</style>
